<template>
  <div>
    <h1>1.数据绑定：{{message}}</h1>
    <input type="text" v-model="message" name="" id="">
    <hr>
    <h1>2.提交表单</h1>
    <form @submit.prevent="post_data">
      <label for="">用户名：</label>
      <input type="text" v-model="form_data.username" name="" id="">
      <label for="">密码：</label>
      <input type="password" v-model="form_data.password" name="" id="">
    <hr>
    <h1>3.更多表单控件</h1>
    <h2>1.下拉菜单</h2>
      <label for="">爱好：</label>
      <select v-model="form_data.hobby" name="" id="">
        <option value="basketball">篮球</option>
        <option value="footerball">足球</option>
      </select>
      <h2>2.单选框</h2>
        <label for="">性别：</label>
        <label for="">男</label>
        <input type="radio" value="男" v-model="form_data.sex" name="" id="">
        <label for="">女</label>
        <input type="radio" value="女" v-model="form_data.sex" name="" id="">
      <h2>3.多选框</h2>
        <label for="">技能：</label>
        <label for="">前端</label>
        <input type="checkbox" value="前端" v-model="form_data.skill" name="" id="">
        <label for="">Java</label>
        <input type="checkbox" value="Java" v-model="form_data.skill" name="" id="">

      <button>提交数据</button>
    </form>
  </div>
</template>

<script>
export default {
  data(){
    return{
      message:133,
      form_data:{
        username:"",
        password:"",
        hobby:"",
        sex:"",
        skill:[]
      }
    }
  },
  methods:{
    post_data(){
      console.log(this.form_data)
    }
  }
}
</script>

<style>

</style>
